@use 'variables' as *;

:root {
  // 主题色
  --primary-color: #{$primary-color};
  --secondary-color: #{$secondary-color};
  --hover-color: #{$hover-color};
  --link-color: #{$link-color};
  --button-hover: #{$button-hover};
  --background-light: #{$background-light};

  // 文字颜色
  --text-primary: #{$text-primary};
  --text-secondary: #{$text-secondary};
  --text-light: #{$text-light};
  --text-white: #{$text-white};

  // 边框颜色
  --border-color: #{$border-color};
  --border-dark: #{$border-dark};

  // 文字大小
  --font-size-xs: #{$font-size-xs};
  --font-size-sm: #{$font-size-sm};
  --font-size-base: #{$font-size-base};
  --font-size-lg: #{$font-size-lg};
  --font-size-xl: #{$font-size-xl};

  // 间距
  --spacing-xs: #{$spacing-xs};
  --spacing-sm: #{$spacing-sm};
  --spacing-md: #{$spacing-md};
  --spacing-lg: #{$spacing-lg};
  --spacing-xl: #{$spacing-xl};

  // 其他
  --border-radius: #{$border-radius-sm};
  --box-shadow: #{$box-shadow};
  --max-width: #{$max-width};
  --header-height: #{$header-height};
} 